<!DOCTYPE html>
<html>
<head>
<script src="./jquerymin.js"></script>
<script src="./JsBarcodemin.js"></script> 
<script>
var macText="012345678912";
window.onload=function()
{	 reloadcnt=0;
 qrcode = new QRCode(document.getElementById("qrcode"), {
	width : 100,
	height : 100
});	
	if (lastPuffs>0)
	{
		//chart(lastPuffs);
	}
}

var websocket = new WebSocket('ws://'+location.hostname+'/');
//var slider = document.getElementById("myRange");
var pg=0;
var vg=0;
var nic=0;
var cbd=0;
var thc=0;
var flavor=0;
var lmh_time=0;
var lastPuffs=1;
var timestamp;
var SuckTime=new Array();
var expiretime;
var liquid_puffs=0;
var t = 0;
var reloadcnt = 0;
var mysnText="000";

var mydata_1=0;
var sys={
	name:"DMT",
	connect:true,
};
var FWVERSION="20200318 V1.0";
function getSN()
{

	return mysnText;
}
function clearCanvas()
{
	var c=document.getElementById("cv");
	var cxt=c.getContext("2d");
	c.height=c.height;
}
function getDatestr(t)
{
	var newd = new Date(t);
	var y=newd.getFullYear()-2000;
	var m=newd.getMonth()+1;	
	var d=newd.getDate();				
	//return y+"/"+m+"/"+d;
	return m+"/"+d;
}

function getPuffs(){
	var m=10;
	var n=20;
	var puff = Math.floor(Math.random()*(m - n) + n);
	return puff;
}

//1.

var dat=new Date();
var y=dat.getFullYear()-2000;
var m=dat.getDay();	
var d=dat.getDate();
var ms=dat.getTime();
var ONEDAY=2*24*60*60*1000;
var d0=getDatestr(ms-6*ONEDAY);
var d1=getDatestr(ms-5*ONEDAY);
var d2=getDatestr(ms-4*ONEDAY);
var d3=getDatestr(ms-3*ONEDAY);
var d4=getDatestr(ms-2*ONEDAY);
var d5=getDatestr(ms-1*ONEDAY);
var d6=getDatestr(ms);
var FW_VERSION=2.243;
var highcharts_time=0;
var highcharts_time_backup=0;
var logdata=getDatestr(ms);

	
//2.
/*
var y=dat.getFullYear()-2000;
var m=dat.getDay();	
var d=dat.getDate();
var ms=dat.getTime();
var ONEDAY=24*60*60*1000;
var d0="1"+"/"+"6";
var d1="1"+"/"+"7";
var d2="1"+"/"+"8";
var d3="1"+"/"+"16";
var d4="1"+"/"+"17");
var d5="1"+"/"+"18";
var d6=getDatestr(ms);
*/
/*
var dict = [
	{x: d0, y: 28},
	{x: d1, y: 11},
	{x: d2, y: 1},
	{x: d3, y: 7},
	{x: d4, y: 17},
	{x: d5, y: 3},
	{x: d6, y: 10}
];
*/

function chart(last)
{
	clearCanvas();
var dict = [
	{x: d0, y: 28},
	{x: d1, y: 11},
	{x: d2, y: 1},
	{x: d3, y: 7},
	{x: d4, y: 17},
	{x: d5, y: 3},
	{x: d6, y: last}
];

/*
	//2.
	  var dict = [
		{x: d0, y: getPuffs()},
		{x: d1, y: getPuffs()},
		{x: d2, y: getPuffs()},
		{x: d3, y: getPuffs()},
		{x: d4, y: getPuffs()},
		{x: d5, y: getPuffs()},
		{x: d6, y: last}
	  ]
*/
	//3.
//	last=getPuffs();
/*	 
	for(var i=0; i<dict.length-1; i++)
	{
		dict[i].y=dict[i+1].y;
	}
	dict[dict.length-1].y=last;
*/

	  
	  var len = dict.length;
	  var xArr = [], yArr = [], tmp_yArr = [];
	  for(var i=0; i<len; i++){
		//xArr.push(i * 60);
		xArr.push(i * 45);
		tmp_yArr.push(dict[i].y);
	  }
	  var tmp_minY = Math.min.apply(Math, tmp_yArr); 
	  var tmp_maxY = Math.max.apply(Math, tmp_yArr); 
	  if(tmp_maxY - tmp_minY <= 200){
		for(var i=0; i<len; i++){
		  yArr.push(tmp_yArr[i] - tmp_minY + 30); 
		}
	  }
	  else{ 
		for(var i=0; i<len; i++){
		  yArr.push(tmp_yArr[i] / 10);
		}
	  }
	  var minY = Math.min.apply(Math, yArr);
	  var maxY = Math.max.apply(Math, yArr);
	   
	  var canvas = document.getElementById("cv"); 
	  var ctx = canvas.getContext("2d");
	 
	  
	  for(var i=0 ;i<len; i++){
		var x = xArr[i];
		var y = maxY - yArr[i] + minY;
		if(i === 0){
		  ctx .moveTo(x, y);
		}
		else{
		  ctx.lineTo(x, y);
		}
	  }
	  ctx.strokeStyle="#78797e"; 
	  ctx.stroke();
	  
	  for(var i=0; i<len; i++)
	  {
		var x = xArr[i];
		var y = maxY - yArr[i] + minY;
		var xMemo = dict[i].x;
		var yMemo = dict[i].y;
		ctx.beginPath();
 
 
		if(dict[i].y<=10)
		{
			ctx.fillStyle="#00ffff";
		}
		else if(dict[i].y<=15)
		{
			ctx.fillStyle="yellow";
		}
		else
		{
			ctx.fillStyle="red";
		}

 
		ctx.arc(x, y, 3, 0, 2*Math.PI); 
		ctx.fill();

		ctx.font="14px Arial"; 


		ctx.fillStyle = "green";
		ctx.fillText(yMemo, x + 3, y - 10,300);
		
		ctx.fillStyle = "red"; 
		{
			ctx.fillText(xMemo, x + 3, canvas.height - 10, 300);//鐢绘枃瀛�
		}
 
	  }
	
}
 

//chart(11);
 
function sendMsg() {
   
  console.log('Sent message to websocket');
}
 

function sendWifiInfo(text1,text2) {
	if(sys.connect)
	{
		
		//console.log('text1='+text1.length);
		//console.log('text2='+text2.length);
		//alert("sended");
		if (text1.length<1 || text2.length<8)
		{
			//alert("Arguments error!");
		}
		else
		{
			websocket.send("W" + text1);
			websocket.send("P" + text2);
		//	document.getElementById("update").disabled=false;
			//tnt();
			//location.reload(true);
		}

	}
}
function sendUpdate() {
	//if(sys.connect)
	{
		if((document.getElementsByName('ftext')[0].value.length <1)||(document.getElementsByName('ftext1')[0].value.length<8))
		{
			alert("wifi error!");
		}
		else
		{
			sendWifiInfo(document.getElementsByName('ftext')[0].value,document.getElementsByName('ftext1')[0].value);
			setTimeout("websocket.send('S99')",1000);		
			//alert("Updating!");
		}
		
	}
}

function sendStop() {

	if(sys.connect)
	{
		websocket.send("stop");		
	}
}
function onClickHander(obj){
	if(obj.checked){
		console.log("selected");
		document.getElementsByName('ftext1')[0].type="text" 
	}else{
		console.log("unselected");
		document.getElementsByName('ftext1')[0].type="password" 

	}
	 
}

function sendSetdose(text1) {
 
/*  var mybtn = document.getElementsByName("lowid");
version
	if (sys.connect)
	{
		if (lowid.value == "LOW")
		{
			lowid.value="MEDIUM";
			text1='4';	 
		}
		else if (lowid.value == "MEDIUM")
		{
			lowid.value="HIGH";
			text1='6'; 
		}
		else if (lowid.value == "HIGH")
		{
			lowid.value="LOW";
			text1='2'; 
		}
		websocket.send("S" + text1);
	}*/
}
function setHeatTime(t) {
 
  /*	var mybtn = document.getElementsByName("lowid");
	//console.log(t);
	if (sys.connect)
	{
		if(t==2)
		{
			lowid.value="LOW";
		}
		else if(t==4)
		{
			lowid.value="MEDIUM";
		}
		else  
		{
			lowid.value="HIGH";
		}
	}*/
}
function SetVersion(t) {
 
	/*var mybtn = document.getElementsByName("version2");
	if (sys.connect)
	{
		version2.value="Version="+t;
	}*/
}
function sendTemp(text) {
  websocket.send("T" + text);
}
function dispcartinfo() { 
}

websocket.onopen = function(evt) {
	console.log('WebSocket connection opened');

	websocket.send("It's open!");
	sys.connect=true;
	//showWifi(sys.connect);
}
websocket.onmessage = function(evt) {
  var msg = evt.data;
  var value;
  switch(msg.charAt(0)) {
    case 'L':
      console.log(msg);
      value = parseInt(msg.replace(/[^0-9\.]/g, ''), 10);
      slider.value = value;
      console.log("Led = " + value);
      break;
    default:
	if (msg.charAt(0)!='0')
	{

		var mydata = evt.data.split(",");
		/*var puff=document.getElementById("idPuffs");
		//mysnText = "DMT"+"-26-"+"2019";
		//puff.innerText = mysnText;
		//puff.innerText = mydata[0]+" ";

		//mysnText = "DMT"+"AB"+"123456"+"  puffs:"+mydata[0]+" ";

		if(mydata[0]<=10)
		{
			puff.style.color="#00ffff";
		}
		else if(mydata[0]<=15)
		{
			puff.style.color="yellow";
		}
		else
		{
			puff.style.color="red";
		}*/

		lastPuffs=mydata[0];
		//chart(lastPuffs);
/*		SuckTime[0]=getDatestr(Number(mydata[14])*1000);//OK
		SuckTime[1]=getDatestr(Number(mydata[15])*1000);//OK
		SuckTime[2]=getDatestr(Number(mydata[16])*1000);//OK
		SuckTime[3]=getDatestr(Number(mydata[17])*1000);//OK
		SuckTime[4]=getDatestr(Number(mydata[18])*1000);//OK
		SuckTime[5]=getDatestr(Number(mydata[19])*1000);//OK
		SuckTime[6]=getDatestr(Number(mydata[20])*1000);//OK
		if((mydata[14])!=mydata_1)
		{
			mydata_1=mydata[14];
			d0=d1;
			d1=d2;
			d2=d3;
			d3=d4;
			d4=d5;
			d5=d6;
			d6=getDatestr(ms);

		}	
		SuckTime[0]=d0;//OK
		SuckTime[1]=d1;//OK
		SuckTime[2]=d2;//OK
		SuckTime[3]=d3;//OK
		SuckTime[4]=d4;//OK
		SuckTime[5]=d5;//OK
		SuckTime[6]=d6;//OK
		
	*/		//logschart(SuckTime[0],SuckTime[1],SuckTime[2],SuckTime[3],SuckTime[4],SuckTime[5],SuckTime[6],Number(mydata[6]),Number(mydata[7]),Number(mydata[8]),Number(mydata[9]),Number(mydata[10]),Number(mydata[11]),Number(mydata[12]));

	//	logdata=mydata[12];
	//	highcharts_time=SuckTime[6];
	//	t = Number(mydata[13])/10.0;
	//	liquid_puffs=Number(mydata[4]);
/* 
		var a=0;
		a=a+Number(mydata[1]);

		document.getElementById("batt").innerHTML = (a)+"%";
		x=document.getElementById("batt");
		if (a < 20)
		{
			x.style.color="red";
		}
		else if (a < 60)
		{
			x.style.color="yellow";
		}
		else  
		{
			x.style.color="green";
		}*/
//		timestamp= new Date(Number(mydata[2])*1000);//OK
//		expiretime=new Date(Number(mydata[3])*1000);//OK
	//	pg=Number(mydata[6]);
//		vg=Number(mydata[7]);
//		nic=Number(mydata[8]);
//		cbd=Number(mydata[9]);
//		thc=Number(mydata[10]);
//		flavor=Number(mydata[11]);
//		temp=Number(mydata[12]);
//		lmh_time=Number(mydata[13]);
		//setHeatTime(lmh_time);
		//SetVersion(FW_VERSION);
//		var info="PG:"+pg+"% "+"VG:"+vg+"% "+"NIC:"+nic+"% "+"FLAVOR:"+flavor+"% "
		reloadcnt++;
		var var_v=document.getElementById("version2");
		macText=mydata[5]+"";


		if(reloadcnt<3)//确保只加载一次
		{
			//document.getElementsByName('ftext')[0].value=""+mydata[14];
			//document.getElementsByName('ftext1')[0].value=""+mydata[15];
			var_v.innerText = "Version="+FW_VERSION;
		
		 }else{
			reloadcnt=4;
		}


/*
		JsBarcode("#imgcode", macText, {
		format: "CODE39",//选择要使用的条形码类型
		width:30,//设置条之间的宽度
		height:500,//高度
		displayValue:true,//是否在条形码下方显示文字
		fontOptions:"bold italic",//使文字加粗体或变斜体
		font:"fantasy",//设置文本的字体
		textAlign:"left",//设置文本的水平对齐方式
		textPosition:"top",//设置文本的垂直位置
		textMargin:5,//设置条形码和文本之间的间距
		fontSize:30,//设置文本的大小
		background:"#eee",//设置条形码的背景
		lineColor:"#2196f3",//设置条和文本的颜色。
		margin:15//设置条形码周围的空白边距
		});
		*/
		
		}
		else
		{
			var mydata = evt.data.split(",");	 
			 
		}      
      break;
  }
}
websocket.onclose = function(evt) {
  console.log('Websocket connection closed');


	//sys.connect=false;
	//showWifi(sys.connect);  
}
websocket.onerror = function(evt) {
  console.log('Websocket error: ' + evt);

}
function showjsbarcode()
{

	//alert(macText);
	JsBarcode("#imgcode", macText);		

	
}



function makeCode () {		
	

//	macText="12345678";
	qrcode.makeCode(macText);
}

function drawCircle(_options){
 
}
drawCircle({
    id: 'one',
    //color: '#00ffff',
    angle: 1,
    lineWidth: 80,
	color: 'grd'
});

function getDateYMD(t)
{
	var newd = new Date(t);
	var y=newd.getFullYear();
	var m=newd.getMonth()+1;	
	var d=newd.getDate();				
	return y+"/"+m+"/"+d; 
}

function dispCart()
{
	console.log("cartinfo start");
 
	var fill=getDateYMD(timestamp);
	var expire=getDateYMD(expiretime);
	 

	if(sys.connect)
	{
		window.open("cart.html?mysn="+mysnText+"&&pg="+pg+"&&vg="+vg+"&&nic="+nic+"&&cbd="+cbd+"&&thc="+thc+"&&flavor="+flavor+"&&filltime="+fill+"&&expiretime="+expire+"&&liquid="+liquid_puffs+"&&lastPuffs="+lastPuffs);
	}

	console.log("cartinfo end");
}
 

function dispDevice()
{
	console.log("deviceinfo start");
 
 
	 

	if(sys.connect)
	{
		window.open("device.html");
//		window.open("device.php");
	}

	console.log("deviceinfo end");
}
 

function showWifi(show)
{
 
	var x=document.getElementById("wifi");

	if(show)
	{		
		x.style.display="unset";
	}
	else
	{
		x.style.display="none";
	}

}
 
function dispRoot()
{
	console.log("root start"); 
	window.open("root.html?ret=456&&name=cart");
	console.log("root end");
}
function add(a,b)
{

}

</script>
<meta charset="UTF-8">
<title>Elite Server</title>
<link type="text/css" href="./test.css" rel="stylesheet"/>
<style type="text/css">
/*
*{
	margin:0px;
	padding:0px;
};*/

.STYLE3 {font-size: 36px}
.STYLE8 {font-size: 45px;}
.STYLE9 {color: #FFFFFF}
.STYLE10 {font-size: 36px; color: #FFFFFF; }

ul,li {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul li {
    float: left;
    width: 100%;
    text-align: center;
	align: center;
}
#divContainer{
	margin-top: 20px;
	text-align: center;
}
#cv{
	width: 780px;
	height: 412px;
	border-bottom: 3px solid #ff00ff;
	border-left: 3px solid #ff00ff;
}
h1 {
  font-size:80px;
  color:red;
}
</style>
</head>
<body>


<!--//(1)
<div style="text-align:right">
	
	<span>
		<img src="wifi.gif" id="wifi" style="text-align:top;display:unset;"></img>
		<img src="bat.gif" style="text-align:top"></img>
		<span id="batt" style="font-size:70%;color:white">38%</span>
	</span>
</div>
<div style="text-align:center;top:0px;margin:0px"><img src="tnt.gif""></img>
-->
<div align="center">
<table border="0" >
	<tr>
		<td width=30% height="240">&nbsp;</td>
		<td width=40%><img src="tnt.gif" style="margin-top:0;padding:0;"></td>
		<td width=30% valign="top" style="align:right;">
			<div align="right">
				<!--<img id="wifi" src="wifi.gif" width="45" height="33">
				<img src="bat.gif" width="64" height="32" >
				<span id="batt" style="color:red;font-size:25px;">0%</span>-->
			</div>
	    </td>		
	</tr>
</table>
<div>

<div class="box">
    <ul>
        <li>
            <!--<canvas id="one" width="500" height="500"></canvas>-->
        </li>
    </ul>
</div>
<!---
<p><span class="STYLE8" style="font-size:40px;color:white">SetTime</span></p>
-->
<p>
  <!-- The below bar should change an LED brightness connected to the microcontroller.
  Try it when more than one device is connected!-->
</p>
<!--
<div class="slidecontainer">
  <input type="range" class="slider" id="myRange" value="0" size="" min="0" max="100">
</div>
-->
<br>

 <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>

<form id="frm1" action="#">
	<td><input id= "set1" name="Submit4" type="button"  style="font-family:Arial;" onclick="makeCode();" value="显示二维码" /></td>
<!--	<td><input id= "set2" name="Submit5" type="button"  style="font-family:Arial;" onclick="setConvection();" value="MID" /></td>
	<td><input id= "set3" name="Submit6" type="button"  style="font-family:Arial;" onclick="setConvection();" value="HIGH" /></td>
		<td>  </td>
	</tr>
		<tr>  <p>  </p><p>     </p>   	</tr>-->
		 <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>

<table align="center">

<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>

 <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>

	<tr> <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>

	<td><input name="ftext" type="text"  placeholder="Network Name" value="W1"  size="20" maxlength="32" align="middle"></td>
	<td><p><p> </td>
	</tr>
	<tr><p><p></tr>
	<tr>
	 <td><input name="ftext1" type="password" placeholder="Password" value="wwwwwwww" size="20" maxlength="32"></td>
	<td><input type="checkbox" id="checkBox"  style="zoom:150%;"; onclick="onClickHander(this)" ></td>
	</tr>
	<tr>	</tr>
	<tr><p>  </p><p>   </p>
		<td><input id= "update" name="Submit3" type="button"  style="font-family:Arial;" onclick="sendUpdate();" value="UPDATE FIRMWARE" /></td>
		<td>  </td>
	</tr>

	
</table>

	


</form>

<!--
<form id="frm1" action="#">
  <p>
	<div align="center">
		<span class="STYLE8" style="font-size:40px;color:white;font-family:Arial;"><span class="STYLE9"></span></span><span class="STYLE10"></span>
    	<input name="ftext" type="text" class="STYLE8" placeholder="Network Name" value=""  size="20" maxlength="32" align="middle">
	</div>
    <br>
	<div align="center">
		<span class="STYLE8" style="font-size:40px;color:white;font-family:Arial;"></span>
		<input name="ftext1" type="text" class="STYLE8" placeholder="Password" value="" size="20" maxlength="32">
	</div>
	

	<br>
	<br>
<p>
	<div style="text-align:center;font-family:Arial;">
		<input id= "update" name="Submit3" type="button" class="STYLE8" style="color:white;background:#40BFC0;width:450px;" onclick="sendUpdate();" value="UPDATE FIRMWARE" />
	</div>
	<br>
	<br>
</p>

	
</form>-->

<p		<span class="STYLE8" style="font-size:200px;color:red;font-family:Arial">wqqwqqw</span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:red;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:red;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p		<span class="STYLE8" style="font-size:200px;color:white;font-family:Arial"></span> </p>
<p align="center">



<p style="color:white;font-family:Arial" id="version2">version</p>
 
<div id="container" style="width: 600px; height: 400px; margin: 0 auto;font-family:Arial"></div>
<script language="JavaScript">
</script>

<div align=center >


</div>

</body>
</html>
<!--end-->
